@import '../../less/color';

.tab-content{
  display:flex;
  flex-direction: row;
  background-color:#fff;
  border-bottom:2px solid #fff;
  position: relative;
  .animate-border {
    background-color: #fff;
    position: absolute;
    left:0;
    bottom: -1px;
    width: 0;
    height: 2px;
  }
  .tab{
    flex:1;
    font-size:14px;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    &.active{
      .tab-text{
        // border-bottom:2px solid #333;
       
      }
    }
    .tab-text{
      padding: 0 5px;
      height: 100%;
      overflow: hidden;
      white-space:nowrap;
      // border-bottom:2px solid #fff;
    }
  }
}
.scroll-tab-content{
  width: 100vw;
  white-space:nowrap;
  background-color:#fff;
  .scroll-tab__content{
     position: relative;
     .animate-border {
        background-color: #fff;
        position: absolute;
        left:0;
        bottom: -1px;
        width: 0;
        height: 2px;
      }
  }
  .tab{
    padding:0 20px;
    display:inline-block;
    font-size:14px;
    &.active{
      .tab-text{
        line-height:45px;
        // border-bottom:2px solid #333;
      }
    }
    .tab-text{
      color:#666;
      padding: 0 5px;
    }
  }
}

.tab-success{
  .tab{
    .tab-text{
      color:#666
    }
    &.active{
      .tab-text{
        color:@success;
        border-bottom:2px solid @success;
      }
    }
  }
  .animate-border {
    background-color: @success !important;
  }
}

.tab-kai{
  .tab{
    .tab-text{
      color:#666
    }
    &.active{
      .tab-text{
        color:@kai;
        border-bottom:2px solid @kai;
      }
    }
  }
  .animate-border {
    background-color: @kai !important;
  }
}

.tab-blue{
  .tab{
    .tab-text{
      color: #666
    }
    &.active{
      .tab-text{
        color:@blue;
        border-bottom:2px solid @blue;
      }
    }
  }
  .animate-border {
    background-color: @blue !important;
  }
}

.tab-danger{
  .tab{
    .tab-text{
      color: #666
    }
    &.active{
      .tab-text{
        color:@red;
        border-bottom:2px solid @red;
      }
    }
  }
  .animate-border {
    background-color: @red !important;
  }
}

.tab-gray{
  .tab{
    .tab-text{
      color:#666
    }
    &.active{
      .tab-text{
        color:@gray;
        border-bottom:2px solid @gray;
      }
    }
  }
  .animate-border {
    background-color: @gray !important;
  }
}